import { useState } from 'react'
import { NavBar } from 'antd-mobile'
import { LeftOutline, RedoOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'

function Index() {
  const nav = useNavigate()
  const [selectedCity, setSelectedCity] = useState('北京')
  const [selectedTab, setSelectedTab] = useState('北京')

  // 城市列表数据
  const cities = [
    '北京', '天津', '上海', '重庆', '河北', '山西', '内蒙古', '辽宁', 
    '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', 
    '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', 
    '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆'
  ]

  // 北京区域列表
  const beijingDistricts = [
    '东城', '西城', '崇文', '宣武', '朝阳', '丰台', '石景山', '海淀',
    '门头沟', '房山', '通州', '顺义', '昌平', '大兴', '怀柔', '平谷',
    '密云', '延庆'
  ]

  const handleCitySelect = (city: string) => {
    setSelectedCity(city)
    setSelectedTab(city)
  }

  const handleDistrictSelect = (district: string) => {
    // 这里可以处理区域选择逻辑
    console.log(`选择了 ${selectedCity} - ${district}`)
    nav(-1) // 返回上一页
  }

  const handleRefresh = () => {
    // 刷新定位逻辑
    console.log('刷新定位')
  }

  return (
    <div style={{ 
      width: '100vw', 
      height: '100vh', 
      background: '#f5f5f5' 
    }}>
      {/* 顶部导航栏 */}
      <NavBar 
        onBack={() => nav(-1)}
        backArrow={<LeftOutline />}
        style={{ 
          background: '#fff',
          borderBottom: '1px solid #f0f0f0'
        }}
      >
        选择城市
      </NavBar>

      {/* 刷新按钮 */}
      <div style={{
        position: 'absolute',
        top: '16px',
        right: '16px',
        display: 'flex',
        alignItems: 'center',
        gap: '4px',
        fontSize: '14px',
        color: '#1677ff',
        cursor: 'pointer',
        zIndex: 10
      }} onClick={handleRefresh}>
        <RedoOutline style={{ fontSize: '16px' }} />
        刷新
      </div>

      {/* 当前定位显示 */}
      <div style={{
        background: '#fff',
        padding: '16px',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{
          fontSize: '14px',
          color: '#666'
        }}>
          当前定位: {selectedCity}
        </div>
      </div>

      {/* 城市选择标签 */}
      <div style={{
        background: '#fff',
        padding: '12px 16px',
        borderBottom: '1px solid #f0f0f0',
        display: 'flex',
        gap: '24px'
      }}>
        <div 
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '8px',
            cursor: 'pointer',
            color: '#1677ff'
          }}
          onClick={() => setSelectedTab('北京')}
        >
          {selectedTab === '北京' && (
            <div style={{
              width: '3px',
              height: '16px',
              background: '#1677ff',
              borderRadius: '2px'
            }} />
          )}
          <span style={{
            fontWeight: selectedTab === '北京' ? 'bold' : 'normal'
          }}>
            北京
          </span>
        </div>
        
        <div 
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '8px',
            cursor: 'pointer',
            color: '#999'
          }}
          onClick={() => setSelectedTab('全部')}
        >
          {selectedTab === '全部' && (
            <div style={{
              width: '3px',
              height: '16px',
              background: '#1677ff',
              borderRadius: '2px'
            }} />
          )}
          <span style={{
            fontWeight: selectedTab === '全部' ? 'bold' : 'normal',
            color: selectedTab === '全部' ? '#1677ff' : '#999'
          }}>
            全部
          </span>
        </div>
      </div>

      {/* 主要内容区域 */}
      <div style={{
        display: 'flex',
        height: 'calc(100vh - 200px)'
      }}>
        {/* 左侧城市列表 */}
        <div style={{
          width: '40%',
          background: '#f8f9fa',
          overflowY: 'auto'
        }}>
          {cities.map((city, index) => (
            <div
              key={index}
              style={{
                padding: '16px',
                borderBottom: '1px solid #f0f0f0',
                cursor: 'pointer',
                background: selectedCity === city ? '#fff' : 'transparent',
                color: selectedCity === city ? '#1677ff' : '#333',
                fontWeight: selectedCity === city ? 'bold' : 'normal'
              }}
              onClick={() => handleCitySelect(city)}
            >
              {city}
            </div>
          ))}
        </div>

        {/* 右侧区域列表 */}
        <div style={{
          width: '60%',
          background: '#fff',
          overflowY: 'auto'
        }}>
          {selectedCity === '北京' && beijingDistricts.map((district, index) => (
            <div
              key={index}
              style={{
                padding: '16px',
                borderBottom: '1px solid #f0f0f0',
                cursor: 'pointer',
                color: '#333'
              }}
              onClick={() => handleDistrictSelect(district)}
            >
              {district}
            </div>
          ))}
          
          {selectedCity !== '北京' && (
            <div style={{
              padding: '16px',
              textAlign: 'center',
              color: '#999'
            }}>
              暂无区域数据
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default Index
